<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运动基础</title>
</head>
<style>
    #div1{width: 200px;height: 200px;background: red;position: absolute;left:0px;top: 50px;}
</style>
<script>
    var timer; //定义定时器
    function starMove () {
        var oDiv = document.getElementById('div1');  //获取div1
        clearInterval(timer);   //开始运动时关闭原有定时器，否则再次点击时会再次开启新得定时器，从而程序出现bug
        timer = setInterval(function () {
            var speed = 1; //定义速度
            if (oDiv.offsetLeft >= 300) //判断oDiv时候移动到300
            {
                clearInterval(timer); //清除定时器  //停止运动
            }
            else {
                oDiv.style.left = oDiv.offsetLeft+speed+'px';  //运动
            }

        },30);
    }

</script>

<body>
<input id="btn1" onclick="starMove()" type="button" value="开始运动">
<div id="div1"></div>





</body>
</html>